import React, { useEffect, useState } from "react";
import NotFountUrl from "../../assets/images/404.jpg";
import loadUrl from "../../assets/images/01427857bbf6c40000018c1bd3430f.jpeg";
interface PropsType {
  src: string;
  alt: string;
  width?: string;
  height?: string;
  className?: string;
}

export const WDImage: React.FC<PropsType> = ({
  src,
  alt,
  width,
  height,
  className,
}) => {
  const [url, setUrl] = useState(loadUrl);
  useEffect(() => {
    // 创建图片元素
    const img = new Image();
    // 加载图片资源
    img.src = src;
    // 成功
    img.addEventListener("load", () => {
      setUrl(src);
    });
    // 失败
    img.addEventListener("error", () => {
      setUrl(NotFountUrl);
    });
  }, []);

  return (
    <img
      src={url}
      alt={alt}
      width={width}
      height={height}
      className={className}
    />
  );
};
